{% extends "bootstrap_responsive.html" %}
{% import "bootstrap_wtf.html" as wtf %}
{% block body %}
{{super()}}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="/static/jquery-ui.multidatespicker.js"></script>
<script type="text/javascript">
	$(function() {
		$('#multiDatesPicker').multiDatesPicker();
	})
</script>
<style type="text/css">
	body {
		font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
		font-size: 62.5%;
	}
	#multiDatesPicker {
		width: 197px;
	}
</style>
<div class="container">
	<div class="hero-unit">
		<h1>同学聚会</h1>
		<dl class="dl-horizontal">
			<dt>
				时间
			</dt>
			<dd>
				2012.12.12
			</dd>
			<dt>
				地点
			</dt>
			<dd>
				依安县
			</dd>
			<dt>
				费用
			</dt>
			<dd>
				AA
			</dd>
			<dt>
				说明
			</dt>
			<dd>
				乱七八糟
			</dd>
		</dl>
		<legend>
			<h5><span class="label label-info">群：498129</span>&nbsp;<span class="label label-success">戴兆麟：59887868</span>&nbsp;<span class="label label-success">陈洪侠：396446759</span></h5>
		</legend>
	</div>
	<legend>
		报名人数 1/2
	</legend>
	{% if messages %}
	<div class="alert alert-success">
		报名成功，请等待审核。
		<a class="close" data-dismiss="alert" href="#">&times;</a>
	</div>
	{% endif %}
	<form class="form-inline" action="/" method="post">
		<input type="text" class="input-small" placeholder="姓名">
		<input type="text" class="input-small" placeholder="电话">
		<input type="text" class="input-small" placeholder="留言">
		<input type="text" class="input-small" placeholder="方便参加聚会的时间" id="multiDatesPicker">
		<label class="checkbox">
			<input type="checkbox">
			特殊情况不能参加 </label>
		<button type="submit" class="btn">
			报名
		</button>
	</form>
	<table class="table table-bordered table-striped">
		<colgroup>
			<col class="span1">
			<col class="span7">
		</colgroup>
		<thead>
			<tr>
				<th>NAME</th>
				<th>MOBILE</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
				<code>
					.success
				</code></td>
				<td>Indicates a successful or positive action.</td>
			</tr>
			<tr>
				<td>
				<code>
					.error
				</code></td>
				<td>Indicates a dangerous or potentially negative action.</td>
			</tr>
			<tr>
				<td>
				<code>
					.warning
				</code></td>
				<td>Indicates a warning that might need attention.</td>
			</tr>
			<tr>
				<td>
				<code>
					.info
				</code></td>
				<td>Used as an alternative to the default styles.</td>
			</tr>
		</tbody>
	</table>
</div>
{% endblock %}
